<template>
	<div class="page pageFixed">
		<custom-box close title="成功" @close="submit">
			<div class="ishopDetail">
				<div class="icon" :class="[type]"></div>
				<template v-if="type=='success'">
					<h4>恭喜申请成功！</h4>
					<p>宝贝请联系 {{ itemDetails.connect_teacher }} 领取「塔克飞机积木」（最新版）一套</p>
				</template>
				<template v-else-if="type=='fail'">
					<h4>非常遗憾申请失败！</h4>
					<p>礼品暂无库存 无法兑换</p>
				</template>
				<template v-else>
					<h4>404…系统错误…</h4>
					<p>请稍后尝试！</p>
				</template>
				<div class="button ishopDetail_submit" @click="submit">确认</div>				
			</div>
		</custom-box>
	</div>
</template>
<script>
export default {
	props:{
		/*success/fail/error*/
		type:{
			require:true,
			type:String			
		},
		itemDetails: {
			type: Object, 
      default: {}
		},
	},
	data(){
		return {
			
		}
	},
	methods:{
		submit(){
			this.$emit('close')
		}
	}
}
</script>
<style scoped lang="scss">
	.ishopDetail{
		padding: .2rem .3rem; position: relative; height: 100%;
		h4{font-size: .34rem; text-align: center; padding: .24rem 0;}
		p{font-size: .24rem; color: #161616; text-align: center; max-width: 60%; margin: auto; line-height: 1.8;}
	}
	.ishopDetail .icon{
		width: 2.12rem; height: 1.86rem; background-color: #000; margin: auto; margin-top: .5rem;
		&.success{
			width: 1.48rem; height: 1.66rem; background: url('../../assets/img/ishopSuccess.png') no-repeat; background-size: 100% 100%;
		}
		&.fail{ background: url('../../assets/img/fail.png') no-repeat; background-size: 100% 100%;}
		&.error{ background: url('../../assets/img/system.png') no-repeat; background-size: 100% 100%;}
	}
	
	.ishopDetail_submit{position: absolute; bottom: -0.6rem; left: 50%; transform: translateX(-50%);}
</style>